class Page {
  // 接受options选项
  constructor (cname, options) {
    // 获取到分页的大盒子，设置分页的属性
    this.container = document.querySelector('.' + cname)
    // 在盒子内部创建一个盒子，有自己的容器去放分页，不会被别的东西影响
    this.content = document.createElement('div')
    // 给这个div修饰样式
    this.setStyle(this.content, {
      // 传入对象
      width: '100%',
      height: '50px',
      border: '3px solid #000',
      display: 'flex',
      'justify-content': 'center',
      'align-items': 'center'
    })
    // 把content放入container中
    this.container.appendChild(this.content)
    // 鼠标移入之后变手指
    this.content.onmouseover = function () {
      this.style.cursor = 'pointer'
      }
      //不允许选中文字
      this.content.onselectstart=()=>false
    // 定义一个属性用来代表放页码的div
    this.pagelist = null
    // 自定义一个language,给他设置默认的值
    this.default = {
      language: {
        first: '首页',
        prev: '上一页',
        pagelist: '',
        next: '下一页',
        last: '尾页'
      },
      pageData: {
        // 默认是100页
        total: 1000,
        pageSize: 10
      }
    }
    // 如过options存在，就替换，不存在就不替换了，别人没传进来，我用自己的这个，别传进来我用别人的值替换自己的default
    if (options.language) {
      for (var attr in options.language) {
        // 自己的值变成别人的值
        this.default.language[attr] = options.language[attr]
      }
    }

    // 遍历default中的language来创建div并放内容
    for (var attr in this.default.language) {
      // 创建div
      var div = document.createElement('div')
      // 给这些键加上类名,为了好分辨，因为对象里的健是唯一的
      div.className = attr
      // div里面的内容是传进来的内容
      div.innerText = this.default.language[attr]
      // 把div放在content里面
      this.content.appendChild(div)
      // 如果不是中间放页码的盒子，才修饰样式，（中间盒子没有内容，就不修饰样式）
      if (attr !== 'pagelist') {
        // 给div设置样式
        this.setStyle(div, {
          border: '1px solid #000',
          padding: '5px',
          margin: '5px'
        })
      } else {
        // 如果没有pagelist就是空的，如果有就是这个div，在下面用的时候，pagelist就能代表这个div
        this.pagelist = div
        this.setStyle(this.pagelist, {
          display: 'flex',
          'justify-content': 'center',
          'align-items': 'center'
        })
      }
    }
    // 创建页码--总共多少数据、每页显示多少、总页数
    // 判断用户是否传入数据的条数
    // 如果有，就替换
    if (options.pageData) {
      for (var attr in options.pageData) {
        this.default.pageData[attr] = options.pageData[attr]
      }
    }
    // 替换完以后，使用default中的pageData来计算页码并创建总页数
    this.totalPage = Math.ceil(this.default.pageData.total / this.default.pageData.pageSize)
    // 当前页默认是1
    this.currentPage = 1
      this.createPage()
      //调用一下回调函数
      this.show = options.show || function () { }
      this.show(this.currentPage)
    // 点击让页码动起来
    this.content.onclick = () => {
      // 事件委托
      // 获取目标元素
      var target = window.event.target || window.event.srcElement
      if (target.className == 'first') {
        this.currentPage = 1
        // 如果我现在在第十页，那么我点击首页，应该重新加载1-5页
          this.createPage()
          this.show(this.currentPage)
      } else if (target.className == 'prev') {
        this.currentPage--
        if (this.currentPage <= 1) {
          this.currentPage = 1
        }
          this.createPage()
          this.show(this.currentPage)
      }else if (target.className == 'next') {
        this.currentPage++
        if (this.currentPage <= this.totalPage) {
          this.currentPage = this.totalPage
        }
          this.createPage()
          this.show(this.currentPage)
      }else if (target.className == 'last') {
        this.currentPage = this.totalPage
        this.createPage()
      } else if (target.tagName==="P") {
          this.currentPage = target.innerText - 0
          this.createPage()
          this.show(this.currentPage)
      }
    }
  }
  // 创建页码的方法，重复调用
  createPage () {
    this.pagelist.innerHTML = ''
    // 根据总页数循环创建页码，并放在pagelist里面
    // 总页数小于5
    if (this.totalPage <= 5) {
      for (var i = 1; i <= this.totalPage; i++) {
        // 创建p标签
        var p = document.createElement('p')
        // p标签里的内容就是创建的页码
        p.innerText = i
        this.pagelist.appendChild(p)
        this.setStyle(p, {
          border: '1px solid #000',
          padding: '5px',
          margin: '5px'
        })
        // 做判断
        if (i === this.currentPage) {
          p.style.backgroundColor = 'purple'
        }
      }
    } else {
      // 总页数大于5
      if (this.currentPage <= 3) {
        // 当前页是前三页
        for (var i = 1; i <= 5; i++) {
          // 创建p标签
          var p = document.createElement('p')
          // p标签里的内容就是创建的页码
          p.innerText = i
          this.pagelist.appendChild(p)
          this.setStyle(p, {
            border: '1px solid #000',
            padding: '5px',
            margin: '5px'
          })
          // 做判断
          if (i === this.currentPage) {
            p.style.backgroundColor = 'purple'
          }
        }
      }
      // 当前页是最后3页
      else if (this.currentPage >= this.totalPage - 2) {
        for (var i = this.totalPage - 4; i <= this.totalPage; i++) {
          // 创建p标签
          var p = document.createElement('p')
          // p标签里的内容就是创建的页码
          p.innerText = i
          this.pagelist.appendChild(p)
          this.setStyle(p, {
            border: '1px solid #000',
            padding: '5px',
            margin: '5px'
          })
          // 做判断
          if (i === this.currentPage) {
            p.style.backgroundColor = 'purple'
          }
        }
      }
      // 当前页是其他页,从当前页减2到当前页+2
      else {
        for (var i = this.totalPage - 2; i <= this.totalPage + 2; i++) {
          // 创建p标签
          var p = document.createElement('p')
          // p标签里的内容就是创建的页码
          p.innerText = i
          this.pagelist.appendChild(p)
          this.setStyle(p, {
            border: '1px solid #000',
            padding: '5px',
            margin: '5px'
          })
          // 做判断
          if (i === this.currentPage) {
            p.style.backgroundColor = 'purple'
          }
        }
      }
    }
  }
  // 给div修饰样式，应该封装一个修饰样式的函数
  setStyle (ele, styleObj) {
    var str = ''
    for (var attr in styleObj) {
      str += attr + ':' + styleObj[attr] + ';'
    // str拼接上键：值,后面加上分号
    }
    // 元素的css样式是str
    ele.style.cssText = str
  // console.log(str)
  }
}
